<template>
    <div>
<h2>显示</h2>
<el-button plain @click="Eject.dialogVisible=true">
  新增
  </el-button>
  <el-button plain type="warning"  @click="print('test')">打印</el-button>
<el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="shelfcode" label="货架编码"  />
    <el-table-column prop="shelfname" label="货架名称" />
    <el-table-column prop="superiorshelf" label="上级货架" />
    <el-table-column prop="shelfbarcode" label="货架条码" />
    <el-table-column prop="shelflayers" label="货架条码"  />
    <el-table-column prop="shelfcells" label="货架格数" />
    <el-table-column prop="creationtime" label="创建时间" />
    <el-table-column prop="status" label="状态"  >
        <template v-slot="scope">
    {{ scope.row.status === 1? '开' : '关' }}
  </template>
        </el-table-column>
        <el-table-column  label="操作" #default="scope" >
            <el-button plain @click="shan(scope.row.shelfId)"   type="danger">删除</el-button>
            <el-button plain @click="update(scope.row)" type="success" >修改</el-button>
            </el-table-column>
  </el-table>
   <div>
    <tr>
        <td>
            <el-dialog
    v-model="Eject.dialogVisible"
    title="新增"
    width="500"
    :before-close="handleClose"
  >
    <span>
        <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="货架编码" prop="shelfcode">
      <el-input v-model="ruleForm.shelfcode" />
    </el-form-item>
    
    <el-form-item label="货架名称" prop="Shelfname">
      <el-input v-model="ruleForm.shelfname" />
    </el-form-item>
    <el-form-item label="上级货架" prop="superiorshelf">
      <el-select v-model="ruleForm.superiorshelf" placeholder="请选择">
        <el-option label="清洗设备" value="清洗设备" />
       
      </el-select>
    </el-form-item>
   
    <el-form-item label="货架条码" prop="shelfbarcode">
      <el-input v-model="ruleForm.shelfbarcode" />
    </el-form-item>
    <el-form-item label="货架层数" prop="shelflayers">
      <el-input v-model="ruleForm.shelflayers" />
    </el-form-item>
    <el-form-item label="货架格数" prop="shelfcells">
      <el-input v-model="ruleForm.shelfcells" />
    </el-form-item>
    <el-form-item label="创建时间" required style="flex: 1; margin-right: 10px;">
            <el-date-picker
              v-model="ruleForm.creationtime"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
    </el-form>
      
    <el-form-item label="状态" prop="status">
    <el-radio-group v-model="ruleForm.status">
      <el-radio label="开" :value=1></el-radio>
      <el-radio label="关" :value=2></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
          <el-button type="primary" @click="submitForm()">
            添加
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>
    </span>
   
  </el-dialog>
        </td>
      
    </tr>
   </div>
  <div><tr>
    <td>
            <el-dialog
    v-model="Eject.xdialogVisible"
    title="新增"
    width="500"
    :before-close="handleClose"
  >
    <span>
        <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="货架编码" prop="shelfcode">
      <el-input v-model="ruleForm.shelfcode" />
    </el-form-item>
    
    <el-form-item label="货架名称" prop="Shelfname">
      <el-input v-model="ruleForm.shelfname" />
    </el-form-item>
    <el-form-item label="上级货架" prop="superiorshelf">
      <el-select v-model="ruleForm.superiorshelf" placeholder="请选择">
        <el-option label="清洗设备" value="清洗设备" />
       
      </el-select>
    </el-form-item>
   
    <el-form-item label="货架条码" prop="shelfbarcode">
      <el-input v-model="ruleForm.shelfbarcode" />
    </el-form-item>
    <el-form-item label="货架层数" prop="shelflayers">
      <el-input v-model="ruleForm.shelflayers" />
    </el-form-item>
    <el-form-item label="货架格数" prop="shelfcells">
      <el-input v-model="ruleForm.shelfcells" />
    </el-form-item>
    <el-form-item label="创建时间" required style="flex: 1; margin-right: 10px;">
            <el-date-picker
              v-model="ruleForm.creationtime"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
    </el-form>
      
    <el-form-item label="状态" prop="status">
    <el-radio-group v-model="ruleForm.status">
      <el-radio label="开" :value=1></el-radio>
      <el-radio label="关" :value=2></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
          <el-button type="primary" @click="xiu()">
            修改
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>
    </span>
   
  </el-dialog>
        </td>
  </tr></div>




    </div>
</template>

<script setup lang="ts">
import axios from 'axios';

import { fa, ru, tr } from 'element-plus/es/locale/index.mjs';
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
onMounted(()=>{
    Show();
})
const Show=()=>{
axios.get('https://localhost:7224/api/Shelfdictionary/GetShelfdictionary').then((res)=>{
    tableData.value=res.data.data;

})
}
const tableData=ref([])
//对话框
const Eject=reactive({
    dialogVisible:false,
    xdialogVisible:false,

})
//关闭
const handleClose=()=>{
    Eject.dialogVisible=false
    Eject.xdialogVisible=false
}
const ruleForm=reactive({

    shelfId:0,
      shelfcode: "",
      shelfname: "",
      superiorshelf: "",
      shelfbarcode: "",
      shelflayers: "",
      shelfcells: "",
      creationtime: "",
      status: 0,
      isDelete: false
})
const submitForm=()=>{
    axios.post('https://localhost:7286/api/Shelfdictionary/AddShelfdictionary',ruleForm).then((res)=>{
       if(res.data.code==100)
       {
        ElMessage.success("添加成功");
        Show(); 
        Eject.dialogVisible = false;
       }
    })
}
const shan=(shelfId:any)=>{
    ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        axios({
            url:'https://localhost:7286/api/Shelfdictionary/DeleteShelfdictionary',
            method:'put',
              data:{
               shelfId:shelfId
                 }
        })
        .then((res)=>{
            if(res.data.code==300)
            {
                ElMessage({
        type: 'success',
        message: '删除成功',
        
      })
      Show();
            }
        })
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
const update=(row:any)=>{
    ruleForm.shelfId=row.shelfId
ruleForm. shelfcode=row.shelfcode
ruleForm. shelfname=row.shelfname
ruleForm. superiorshelf=row.superiorshelf
ruleForm. shelfbarcode=row.shelfbarcode
ruleForm. shelflayers=row.shelflayers
Eject.xdialogVisible=true,
ruleForm. shelfcells=row.shelfcells
ruleForm. creationtime=row.creationtime
ruleForm. status=row.status
ruleForm. isDelete=row.isDelete


}
const xiu=()=>{
    axios({
        url:'https://localhost:7286/api/Shelfdictionary/UpdateShelfdictionary',
        method:'put',
          data:ruleForm
    })
    .then((res)=>{
        if(res.data.code==400)
        {
            ElMessage({
        type: 'success',
        message: '修改成功',

      })
      Eject.xdialogVisible=false
      Show();
        }
    })

}


//定义一些打印相关的常量 可以通用
//打印左右边距
const printMinLeft = 5;
//打印A4宽度px
const a4Width = 595;
//A4的panel设置
const a4Panel = { width: 210, height: 297, paperFooter: 340, paperHeader: 10 };

const headerColNum = 3; //总列数
const titleHeight = 20; //标题行高
const contentWidth = a4Width - printMinLeft * 2; //内容宽度

//定义两个新建打印文本和打印表格列的方法，方便复用代码
//新字段元素：列索引，列数，行索引（从1开始） 中文名 字段名
const newPrintText = (
  col: any,
  colNum: any,
  row: any,
  title: any,
  field: any
) => {
  return {
    options: {
      width: (contentWidth / headerColNum) * colNum,
      height: 20,
      fontSize: 10,
      top: titleHeight + 20 * row,
      left: (contentWidth / headerColNum) * (col - 1) + printMinLeft,
      type: "text",
      title: title,
      field: field,
    },
  };
};
// 新列元素：中文名，字段名。相对宽度（建议1~10）
const newPrintColumn = (title: any, field: any, width: any) => {
  return {
    title: title,
    field: field,
    width: width,
    colspan: 1,
    rowspan: 1,
    align: "center",
  };
};

import { disAutoConnect, hiprint } from "vue-plugin-hiprint";
disAutoConnect(); // 取消自动连接直接打印客户端
hiprint.init(); //初始化
const print = (title: any) => {
  //选择判断
  Show();

  //定义需要打印的数据
  let printData = {
    operator: "admin",
    addDate: new Date().toLocaleDateString(),
    details: <any>[],
  };
  printData.details = tableData.value;
  //定义模板和面板，所有打印元素都在面板上，默认A4纸大小
  let hiprintTemplate = new hiprint.PrintTemplate();
  let panel = hiprintTemplate.addPrintPanel(a4Panel);
  //文本标题
  panel.addPrintText({
    options: {
      width: 150,
      height: 20,
      top: 10,
      left: contentWidth / 2 - 30,
      fontSize: 25,
      title: "货架字典明细",
      type: "text",
    },
  });
  //头部内容

  panel.addPrintText(newPrintText(1, 1, 1, "制单人", "operator"));
  panel.addPrintText(newPrintText(2, 1, 1, "创建时间", "addDate"));
  let tmpColumns = [];
  tmpColumns.push(newPrintColumn("货架编码", "shelfcode", 3));
  tmpColumns.push(newPrintColumn("货架编码", "shelfname", 3));
  tmpColumns.push(newPrintColumn("货架编码", "superiorshelf", 3));

  panel.addPrintTable({
    options: {
      width: a4Width - printMinLeft * 2,
      top: 80,
      left: printMinLeft,
      field: "details",
      columns: [tmpColumns],
    },
  });
  //打印
  hiprintTemplate.print(printData);
};

//#endregion

</script>

<style scoped>

</style>